/* 页面整体容器样式 */
.assessment-container {
  /* 使用Flex布局实现垂直排列 */
  display: flex;
  flex-direction: column;
  /* 设置最大宽度和水平居中 */
  max-width: 100%;
  width: 100%;
  height: 100vh;
  /* 背景颜色设置为浅灰色背景 */
  background-color: #f8f8f8;
  /* 字体设置 */
  font-family: 'PingFang SC', 'Helvetica Neue', Arial, sans-serif;
}

/* 顶部状态栏样式 */
.status-bar {
  /* 顶部状态栏的布局 */
  display: flex;
  justify-content: space-between;
  align-items: center;
  /* 内边距和高度 */
  padding: 10px 20px;
  height: 24px;
}

/* 时间显示样式 */
.time {
  /* 字体大小和粗细 */
  font-size: 14px;
  font-weight: 500;
}

/* 状态图标容器 */
.icons {
  /* 图标水平排列 */
  display: flex;
  gap: 5px;
}

/* 内容区域样式 */
.content {
  /* 内容区域的布局 */
  display: flex;
  flex-direction: column;
  align-items: center;
  /* 内边距 */
  padding: 20px;
  /* 让内容区域占据剩余空间 */
  flex: 1;
}

/* 插图区域样式 */
.illustration {
  /* 插图大小 */
  width: 100%;
  height: 250px;
  /* 背景图片设置 */
  background-image: url('./umbrella-illustration.svg');
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  /* 为真实图片预留位置 */
  margin-bottom: 30px;
}

/* 标题样式 */
.title {
  /* 字体大小和颜色 */
  font-size: 24px;
  color: #5a3e36;
  /* 文本居中和下边距 */
  text-align: center;
  margin-bottom: 15px;
  /* 字体加粗 */
  font-weight: 600;
}

/* 描述文本样式 */
.description {
  /* 字体大小和颜色 */
  font-size: 16px;
  color: #7a6a65;
  /* 文本居中 */
  text-align: center;
  /* 行高和最大宽度 */
  line-height: 1.5;
  max-width: 280px;
  /* 下边距 */
  margin-bottom: 40px;
}

/* 开始按钮样式 */
.start-button {
  /* 按钮尺寸和形状 */
  width: 90%;
  max-width: 300px;
  padding: 15px 0;
  border-radius: 25px;
  /* 按钮颜色和边框 */
  background-color: #5a3e36;
  color: white;
  border: none;
  /* 字体样式 */
  font-size: 16px;
  font-weight: 500;
  /* 鼠标样式 */
  cursor: pointer;
  /* 过渡效果 */
  transition: background-color 0.3s;
}

/* 按钮悬停效果 */
.start-button:hover {
  /* 悬停时背景变暗 */
  background-color: #4a3329;
}

/* 箭头样式 */
.arrow {
  /* 箭头和文本之间的间距 */
  margin-left: 8px;
  /* 字体大小 */
  font-size: 18px;
} 